<!--图片上传-->
<template>
  <div class="content-image">
    <div class="name">{{ title }}</div>
    <el-input :value="fileName || fileNameValue" disabled />
    <uploadTheFile @fileName="filenameModify" v-model:imageInfo="imageInfo"></uploadTheFile>
  </div>
</template>

<script setup>
import uploadTheFile from "@/components/FormComponents/uploadImageComponent.vue";
import { useTemplateEditing } from "@/store/modules/templateEditing";
const templateEditing = useTemplateEditing();
const { fileName } = storeToRefs(templateEditing); // 获取当前模板编辑相关状态

const props = defineProps({
  //标题
  title: {
    type: String,
    required: true,
  },
});
//文件名
const fileNameValue = defineModel("fileNameValue", {
  type: String,
  required: true,
});
//图片信息
const imageInfo = defineModel("imageInfo", {
  type: Object,
  required: true,
});
/**
 * 文件名修改
 * @param value
 */
const filenameModify = value => (fileName.value = value);
</script>

<style scoped lang="less">
.content-image {
  padding: 20px 0;
  //公共标题
  .name {
    font-size: 18px;
    color: #351d1d;
    font-weight: 400;
    margin-bottom: 14px;
  }
  :deep(.el-input) {
    width: 100%;
    height: @InputHeight;
    font-size: 18px;
  }
}
</style>
